<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/qs.js"></script>
</head>
<body>
    <div id="app">
        账号:<input name="username" placeholder="请输入账号" v-model="user.username"><br>
        密码:<input name="password" placeholder="请输入密码" v-model="user.password"><br>
        <button v-on:click="login">登录</button>
    </div>
    <script>
        new Vue({
           el:"#app",
           data:{
               user:{"username":"","password":""}
           },
            methods:{
               login:function(){
                   console.log(Qs.stringify(this.user));
                   axios.post(
                       "http://localhost:8080/login",
                        Qs.stringify(this.user)
                   )
                   .then(result => {
                       if(result.data.code == 200){
                            console.log(result.data.data);
                            //将token保存到浏览器本地
                            localStorage.setItem("token",result.data.data);
                            //跳转用户列表页面
                            location.href = "user.html";
                       }
                   });
               }
            }
        });
    </script>
</body>
</html>
